<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="关键字" prop="">
        <el-input v-model="queryParams.key" placeholder="操作人员" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="操作时间">
        <el-date-picker v-model="dateRange" style="width: 340px" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss">
          ></el-date-picker>
      </el-form-item>
      <el-form-item label="接口名称" prop="">
        <el-select v-model="queryParams.url" filterable placeholder="请选择" @change="changeParams">
          <el-option v-for="(item ,index) in this.listApilog" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :height="tableHeight" ref="tables" v-loading="loading" :data="list" stripe border>
      <el-table-column label="序号" type="index" width="55" align="center" />
      <el-table-column label="系统模块" align="center" prop="apiName" />
      <el-table-column label="请求方式" align="center" prop="method" width="100" />
      <el-table-column label="操作人员" align="center" prop="userName" width="100" />
      <el-table-column label="操作地址" align="center" prop="ip" />
<!--      <el-table-column label="操作地点" align="center" prop="city" />-->
      <el-table-column label="操作状态" align="center" prop="status">
      </el-table-column>
      <el-table-column label="操作日期" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="
        list.length > 9
          ? 10 + queryParams.pageNum * queryParams.pageSize
          : list.length
      " :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" layout="prev, next" nextTitle="下一页" prevTitle="上一页" />
  </div>
</template>

<script>
import { listApilog, listUrlMapping } from "@/api/operation/operlog";

export default {
  name: "Operlog",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 默认排序
      defaultSort: { prop: "operTime", order: "descending" },
      // 表单参数
      form: {},
      listApilog: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: this.global.pageSize,
        beginTime: undefined,
        endTime: undefined,
        key: undefined,
      },
      value: ''
    };
  },
  created() {
    let myDate = new Date();
    let year = myDate.getFullYear(); //获取当前年
    let mon = myDate.getMonth() + 1; //获取当前月
    let date = myDate.getDate(); //获取当前日
    let day = year + "-" + mon + "-" + date;

    this.dateRange[0] = day + ' ' + '00:00:00'
    this.dateRange[1] = day + ' ' + '23:59:59'
    this.queryParams.beginTime = String(this.dateRange[0]);
    this.queryParams.endTime = String(this.dateRange[1]);

    this.getList();
    this.getListUrlMapping();

  },
  computed: {
    tableHeight() {
      return 'calc(100vh - 280px)'
    },
  },
  watch: {

    dateRange(newV, oldV) {
      if (newV.length >= 2) {
        this.queryParams.beginTime = String(this.dateRange[0]);
        this.queryParams.endTime = String(this.dateRange[1]);
      }

      this.getList();
    }
  },
  methods: {
    changeParams() {

    },

    /** 查询登录日志 */
    getList() {
      this.loading = true;
      listApilog(this.queryParams).then((response) => {
        this.list = response.data;
        this.total = 10;
        this.loading = false;
      });
    },

    getListUrlMapping() {
      listUrlMapping().then((response) => {
        let list = response.data;
        let a_values = Object.values(list);
        let a_keys = Object.keys(list);
        var arrList = []
        for (let i in a_values) {
          let str = a_keys[i]
          let arr = str.split(':')
          let dict = { label: a_values[i], value: arr[1], }
          arrList.push(dict);
        }
        this.listApilog = arrList;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      // this.queryParams.beginTime = undefined;
      // this.queryParams.endTime = undefined;
      this.queryParams.key = undefined;
      this.queryParams.url = undefined;
      this.handleQuery();
    },

    /** 详细按钮操作 */
    handleView(row) {
      this.open = true;
      this.form = row;
    },
  },
};
</script>


